<template>  
    <el-container class="bg_img1">
        <el-main class="bg_size1">            
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" label-position="left" label-width="100px">
                <h1 class="DL">图书馆预约</h1>
                <el-row>
                    <el-col :span="8" :offset="8">
                        <el-form-item label="角色" prop="role" class="item1">
                            <el-radio-group v-model="ruleForm.role">
                                <el-col :span="2" :offset="2">
                                    <el-radio label="管理员" >管理员</el-radio >
                                </el-col>
                                <el-col :span="1" :offset="16">
                                    <el-radio label="用户">用户</el-radio>
                                </el-col>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            
                <el-row>
                    <el-col :span="8" :offset="8">
                        <el-form-item label="用户名" prop="accountname" class="item1">
                            <el-input v-model="ruleForm.accountname" placeholder="请输入用户名" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8" :offset="8">
                        <el-form-item label="密码" prop="password" class="item1">
                            <el-input v-model="ruleForm.password" placeholder="请输入密码" type="password" show-password clearable />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="4" :offset="8">
                        <el-form-item label="验证码" prop="captcha" class="item1">
                            <el-input v-model="ruleForm.captcha" placeholder="请输入验证码" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="margin-left: 15px;">
                        <IdentifyVue :identifyCode ="identifyCode" @click="change()"></IdentifyVue>
                        <a class="pointer" @click="change()">看不清？换一个</a>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="3" :offset="11" class="msg">
                        <span >{{msg}}</span>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="2" :offset="9">
                        <el-form-item>
                            <el-button type="primary" text bg  @click="submit()">
                                登录
                            </el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="1">
                        <el-form-item>
                            <el-button type="primary" text bg @click="register()">
                                <router-link to="/registerVue" target="_self">注册</router-link>
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
        </el-main>
    </el-container>    
</template>

<script> 
import IdentifyVue from "../components/IdentifyVue.vue"
import axios from "axios"
import qs from "querystring"
import store from "../store"

export default {
    name:"LoginVue",
    components:{
      IdentifyVue,
    },
    data(){
        return{
            // 验证码
            identifyCodes: "" + new Date().getTime(),
            identifyCode:"",
            //表单信息
            ruleForm: {
                role:'用户',
                accountname: 'admin',
                password: '111111',
                captcha:'',
            },
            rules: {
                role:[{
                    required: true,
                    message: '权限不能为空',
                    trigger: 'blur'
                }],
                username: [{
                    required: true,
                    message: '用户名不能为空',
                    trigger: 'blur'
                }, {
                    min: 3,
                    message: '长度不能小于 3 个字符',
                    trigger: 'blur'
                }],
                password: [{
                    required: true,
                    message: '密码不能为空',
                    trigger: 'blur'
                }, {
                    min: 6,
                    max: 10,
                    message: '长度在 6 到 10 个字符',
                    trigger: 'blur'
                }],
                captcha: {
                    required: true,
                    message: '验证码不能为空',
                    trigger: 'blur'
                }
            },
            msg:''
        }
    },
    methods:{
        // 生成随机数
        randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min)
        },
        // 生成四位随机验证码
        makeCode(o, l) {
            for (let i = 0; i < l; i++) {
                this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
            }
        },
        //更新验证码
        change(){
            this.identifyCode = '';
            this.makeCode(this.identifyCodes, 4);
            console.log(this.identifyCode);
        },
        submit(){ 
            // console.log(this.ruleForm.role);          
            const that = this;
            this.$refs['ruleForm'].validate(
                (valid) => { if(valid){
                
                let t = that.identifyCode;
                let a = that.ruleForm.captcha;
                let isrole = that.ruleForm.role;
                if(t == a){

                let formdata = this.ruleForm;
                
                if(isrole == "用户"){
                    axios.post("http://localhost:8080/library/login",
                    qs.stringify(formdata),
                    {
                        headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}
                    }).then(function(response){
                        if(response.data.code==1){
                            window.alert("登录成功"); 
                            //用户信息存入store
                            let modelInfo = response.data.data;
                            that.$store.commit("setAccountInfo", modelInfo);

                            console.log(that.$store.state.accountInfo);

                            that.$router.push({
                                path:'/UserIndex',
                            })
                        }else{
                            that.msg = "登录失败，请重新登录！";
                            this.$router.push({path:'/'});
                        }
                        }).catch((error) => {
                            console.log(error)
                        })
                        
                    }else{
                        axios.post("http://localhost:8080/library/adminLogin",
                    qs.stringify(formdata),
                    {
                        headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}
                    }).then(function(response){
                        if(response.data.code==1){
                            window.alert("登录成功"); 
                            let modelInfo = response.data.data;
                            that.$store.commit("setAccountInfo", modelInfo);
                            console.log(that.$store.state.accountInfo);
                            that.$router.push({
                                path:'/AdminIndex',
                            })
                        }else{
                            // window.alert("失败");
                            that.msg = "登录失败，请重新登录！";
                            this.$router.push({path:'/'});
                        }
                        }).catch((error) => {
                            console.log(error)
                    })
                    }
                } 
                else{
                        this.msg = "验证码错误，请重新输入";
                    } 
            }
                
        })
     }   

        
    },
    mounted() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    }
}
</script>
<style scoped>
    .DL{
        margin-left: 47%;
        color: rgb(150, 172, 192);
    }

    .pointer{
        margin-left: 10px;
        color: #337ecc;
        cursor: pointer;
    }

    .img{
        width: 90px;
        height:30px;
    }

    .msg{
        color:red;
        margin-bottom: 15px;
    }

    .bg_img1{
      background-image: url(../img/shouye.jpg);
      background-size: 100% 100%;
      background-repeat: no-repeat; 
     
    }

    .bg_size1{
        margin-top: 113px;
        margin-bottom: 220px;
    }

    .item1 .el-form-item__label{
        color: rgb(64,158,255);
    }


</style>


